<template>
  <div class="dashboard-container">
    <el-card body-style="background:linear-gradient(270deg,#ffc771,#ffa634)">
      <img
        src="http://www-wms-java.itheima.net/img/dashboard-banner-left@2x.5afd2949.png"
        alt=""
        class="imgleft"
      >
      <img
        src="http://www-wms-java.itheima.net/img/dashboard-banner-right@2x.28195570.png"
        alt=""
        class="imgright"
      >
      <img :src="userInfo.userimg" alt="" class="userimg">
      <p>仓库管理员</p>
      <p>{{ userInfo.language }}</p>
      <p>————罗永浩</p>
      <div>
        <p>北京</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name'])
  },
  data() {
    return {
      userInfo: {
        username: '',
        userimg:
          'https://img0.baidu.com/it/u=1856875953,2747691857&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=506',
        language: '我就是认真'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
::v-deep .el-card__body {
  width: 723px;
  height: 148px;
  position: relative;
  padding: 0px;
  .imgleft {
    position: absolute;
    top: 0;
    left: 0;
    height: 148px;
  }
  .imgright {
    position: absolute;
    top: 0;
    right: 0;
    height: 148px;
  }
  .userimg {
    position: absolute;
    top: 31px;
    left: 43px;
    height: 62px;
    width: 62px;
  }
}
</style>
